<template>
  <div class="Information">
    <div class="Information-contain">
      <div class="header">
        <div :style="{paddingTop: '10px'}">
          <Breadcrumb :breadcrumb="breadcrumb" />
        </div>
      </div>
      <div class="main">
        <div class="main-left">
          <el-menu 
            class="el-menu-vertical-demo" 
            text-color="#32aefd" 
            default-active="1-1" 
            :default-openeds="['1','2']" 
            @select="handleSelect"
          >
            <el-submenu index="1">
              <template #title>
                <span>
                  <i class="iconfont icon-user1" :style="{paddingRight:'7px', fontSize: '16px'}" />服务消息
                </span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1">全部消息</el-menu-item>
                <el-menu-item index="1-2">未读消息</el-menu-item>
                <el-menu-item index="1-3">已读消息</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template #title>
                <span>
                  <i class="iconfont icon-File" :style="{paddingRight:'7px', fontSize: '16px'}" />个人消息
                </span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="2-1">评价</el-menu-item>
                <el-menu-item index="2-2">收藏</el-menu-item>
                <el-menu-item index="2-3">私信</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </div>
        <div class="main-right">
          <service-mes v-if="currentTab[0] === '1'" :currentTab="currentTab" :allLost="tabAllLost"/>
          <person-mes v-if="currentTab[0] === '2'" :currentTab="currentTab" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Breadcrumb from "@/components/Breadcrumb";
import ServiceMes from './ServiceMes';
import PersonMes from './PersonMes';
import { mapActions, mapState, mapMutations } from 'vuex';
export default {

  components: {
    Breadcrumb,
    ServiceMes,
    PersonMes
  },
  computed: {
    ...mapState({
      mesPagination: state => state.message.mesPagination,
      userInfo: state => state.user.userInfo
    }),
  },
  data () {
    return {
      currentTab: '1-1',
      breadcrumb: [
        { title: '天鹿市场', to: '/index' },
        { title: '消息中心', to: '' }
      ],
      tabAllLost: false
    };
  },
  methods: {
    ...mapActions(['fetchMessages']),
    handleSelect (e) {
      this.currentTab = e;
      this.tabAllLost = !this.tabAllLost;
      if(e[0] === '1'){
        let which = null;
        switch(Number(e[2])){
          case 1:
            which = 0;
            break;
          case 2:
            which = 1;
            break;
          case 3:
            which = 6;
            break;
        }
        this.fetchMessages({
          message_userid: this.userInfo.user_id,
          pn: 1,
          pageSize: this.mesPagination.pageSize,
          messageNumber: which
        });
      }
    },
  },
}
</script>
<style lang='scss' scoped src="./index.scss" />
<style lang="scss">
.Information {
  .el-table {
    border: 1px solid rgba(11, 11, 11, 0.2);
    th,
    td {
      border-color: rgba(11, 11, 11, 0.2) !important;
    }
    td:nth-child(1) {
      text-align: left !important;
    }
  }
  .el-checkbox {
    margin-right: 10px;
  }
  button {
    border-color: rgba(11, 11, 11, 0.2);
    padding: 10px 15px;
  }
}
</style>
